<template>
  <view class="coupon">
    <view class="tabs-nav space-between">
      <view
        :class="{ active: current == index }"
        v-for="(item, index) in tabsList"
        :key="index"
        @click="tabClick(index)"
        >{{ item.name }}</view
      >
    </view>
    <view class="content">
      <view class="my" v-if="current == 0">
        <view class="tabs-nav space-between">
          <view
            :class="{ active: mycurrent == index }"
            v-for="(item, index) in mytabsList"
            :key="index"
            @click="mytabClick(index)"
            >{{ item.name }}</view
          >
        </view>
        <scroll-view class="my-sv" scroll-y="true" @scrolltolower="scrolower">
          <view class="couponList" v-if="receivedCouList.length">
            <view
              :class="[
                'list',
                mycurrent == 0 ? 'img0' : mycurrent == 1 ? 'img1' : 'img2',
              ]"
              v-for="(item, index) in receivedCouList"
              :key="index"
            >
              <view class="space-between">
                <view class="title">{{item.coupon_title}}</view>
                <view class="num">
                  <text class="money">¥</text>
                  <text>{{item.coupon_price}}</text>
                </view>
              </view>
              <view class="space-between">
                <view class="time">{{item.add_time}}{{item.add_time?'-':''}}{{item.end_time}}</view>
                <view class="use"> 满{{item.use_min_price}}可用 </view>
              </view>
              <view class="line space-between">
                <view class="condition">全场可用</view>
                <view class="btn" v-if="mycurrent == 0"> 立即使用 </view>
              </view>
            </view>
          </view>
		  <view v-else class="empty" >
		  	暂无数据...
		  </view>
        </scroll-view>
      </view>
      <view class="my mycenter" v-else>
        <scroll-view class="my-sv" scroll-y="true" @scrolltolower="scrolower">
          <view class="couponList" v-if="couponList.length">
            <view class="list img0" v-for="(item, index) in couponList" :key="index">
              <view class="space-between">
                <view class="title">海运专享优惠券</view>
                <view class="num">
                  <text class="money">¥</text>
                  <text>{{item.coupon_price}}</text>
                </view>
              </view>
              <view class="space-between">
                <view class="time">{{item.start_time}}{{item.start_time?'-':''}}{{item.end_time}}</view>
                <view class="use">满{{item.use_min_price}}可用</view>
              </view>
              <view class="line space-between">
                <view class="condition">全场可用</view>
                <view class="btn" @click="receive(item)">立即领取</view>
              </view>
            </view>
          </view>
		  <view v-else class="empty" >
		  	暂无数据...
		  </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 导航栏
      tabsList: [
        {
          name: "我的优惠券",
        },
        {
          name: "领券中心",
        },
      ],
      // 导航栏
      mytabsList: [
        {
          name: "待使用",
        },
        {
          name: "已使用",
        },
        {
          name: "已过期",
        },
      ],
      current: 0,
      mycurrent: 0,
	  couponList:[],
	  receivedCouList:[]
    };
  },
  onShow() {
  	this.getlist();
  },
  methods: {
	// 领券中心数据
	getCouponList(){
		this.$api.post({
		    url: "/ebapi/coupons_api/get_issue_coupon_list",
		    data: {},
		    success: (res) => {
				this.couponList = res.filter(item=>!item.is_use);
			},
		 })
	},
	getReceivedCouList(){
		this.$api.post({
		    url: "/ebapi/coupons_api/get_use_coupons",
		    data: {types:this.mycurrent+1},
		    success: (res) => {
				this.receivedCouList = res;
			},
		 })
	},
    // 点击导航栏
    tabClick(index) {
      console.log("index", index);
      this.current = index;
	  this.getlist();
    },
	getlist(){
		if(this.current == 1){
			this.couponList = []
			this.getCouponList();
		}
		if(this.current == 0){
			this.receivedCouList = []
			this.getReceivedCouList();
		}
	},
    // 点击导航栏
    mytabClick(item) {
      this.mycurrent = item;
	  this.getReceivedCouList();
	  console.log("item", item);
    },
    // 触底事件
    scrolower() {},
    // 领取
    receive(item) {
		console.log(item,'item 1');
		this.$api.post({
			url: "/ebapi/coupons_api/user_get_coupon",
			data: {couponId:item.id},
			success: (res) => {
				this.getlist();
				this.$u.toast("恭喜您领取成功！");
			},
		})
    },
  },
};
</script>

<style lang="scss">
page {
  padding: 0;
  background-color: #fff;
}

.coupon {
  .tabs-nav {
    margin-bottom: 20rpx;
    padding: 36rpx 110rpx;
    font-size: 30rpx;

    .active {
      position: relative;
      color: $uni-color-main;
      font-weight: bold;
    }

    .active::before {
      content: "";
      position: absolute;
      bottom: -10rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 50rpx;
      height: 7rpx;
      border-radius: 5rpx;
      background-color: $uni-color-main;
    }
  }

  .content {
    .my {
      .tabs-nav {
        padding: 36rpx 83rpx;
        margin-bottom: 10rpx;
      }

      .my-sv {
        .couponList {
          color: #fff;

          .list {
            // background-image: url("../../static/temporary/coupon.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            height: 260rpx;
            width: 685rpx;
            padding: 36rpx 25rpx 15rpx 30rpx;
            margin: 0 auto;
            margin-bottom: 30rpx;

            .line {
              margin-top: 50rpx;
            }

            .title {
              font-weight: bold;
              font-size: $uni-text-size-title;
            }

            .num {
              font-size: 56rpx;
              font-weight: bold;

              .money {
                font-size: 36rpx;
              }
            }

            .time {
              font-size: 20rpx;
            }

            .use {
              font-size: $uni-text-size-title;
            }

            .condition {
              color: #999999;
              font-size: 22rpx;
            }

            .btn {
              font-size: 22rpx;
              padding: 6rpx 20rpx;
              border-radius: 30rpx;
              background-color: $uni-color-main;
            }
          }

          .img0 {
            background-image: url("../../static/temporary/coupon.png");
          }

          .img1 {
            background-image: url("../../static/temporary/coupon-used.png");
          }

          .img2 {
            background-image: url("../../static/temporary/coupon-no.png");
          }
        }
      }
    }
    // .mycenter {
    // }
  }
}
</style>
